<template>
	<el-main style="padding:0 20px;">
		<el-card shadow="never">
			<el-descriptions :title="data.title" :column="1" border>
				<el-descriptions-item label="数据详情" width="80px">
					<div v-if="this.data" class="grid-content">
						<div style="border-bottom: 1px solid #ccc;margin: 15px 0px">
							{{ data.updateTime }}
						</div>
						<div style="background: #efefef;text-indent: 2em;line-height: 2em;">
							<p style="padding:0 10px;line-height: 2em;">
								{{data.description}}
							</p>
						</div>
						<div class="article-content" v-html="data.content"></div>
					</div>
				</el-descriptions-item>
			</el-descriptions>
		</el-card>
	</el-main>
</template>

<script>
	export default {
		data() {
			return {
				data: {
					id: ""
				}
			}
		},
		mounted() {

		},
		methods: {
			//注入数据
			setData(data){
				this.data = data
			}
		}
	}
</script>

<style lang="scss">
.grid-content {
	border-radius: 4px;
	min-height: 36px;
	.article-content{
		background-color: rgb(255, 255, 255);
		margin: 20px 0px;
		border-radius: 4px;
		min-height:500px;
		line-height: 2em;
		b.x{
			font-size: 14px;
			margin-bottom:10px;
			display: inline-block;
		}
		b.y{
			font-size: 12px;
			color:#607cf2
		}
		b.z{
			font-size: 12px;
			color: #ccc
		}
		p{
			text-indent: 2em;
		}
		ul{
			padding: 0;
			li{
				text-indent: 2em;
				list-style: none;
			}
		}
		pre {
			display: block;
			font-family: monospace;
			background: #e2e0e0;
			margin: 8px 2em;
			color: #4f4f4f;
			padding-left: 2em;
			white-space: pre-wrap;
			word-wrap: break-word;
		}
	}
}
</style>
